<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>The Ajax 02 Page</h1>
<fieldset>
    <legend>Ajax 表单请求</legend>
    <form enctype="application/x-www-form-urlencoded">
        <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
        <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="result"></span>
</fieldset>
</body>
<script type="text/javascript">
    function doAjaxPost(url,params,callback){
        //1.创建XmlHttpRequest对象
        var xhr=new XMLHttpRequest();
        //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
        xhr.onreadystatechange=function(){//callback(回调函数)
            //基于xhr对象获取的通讯状态，对响应数据进行处理
            if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
                //服务端响应的结果会传递给XHR对象，
                //我们可以借助xhr.responseText获取响应结果
                callback(xhr.responseText);
            }
        }
        //3.创建与服务端的连接
        xhr.open("POST",url,true);//true表示异步
        xhr.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
        //4.发送请求
        xhr.send(params); //post请求将参数写到send方法
        //5.对响应结果进行处理(在回调函数中处理)。
    }
    function doAjaxGet(url,params,callback){
        //1.创建XmlHttpRequest对象
        var xhr=new XMLHttpRequest();
        //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
        xhr.onreadystatechange=function(){//callback(回调函数)
            //基于xhr对象获取的通讯状态，对响应数据进行处理
            //readyState状态说明
            //0：未初始化，尚未调用open() 方法
            //1：启动。已经调用open() 方法，但尚未调用send() 方法
            //2：发送。已经调用send() 方法，但尚未接收到响应
            //3：接收。已经接收到部分响应
            //4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
            if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
                //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
                callback(xhr.responseText);
            }
        }
        //3.创建与服务端的连接
        xhr.open("GET",url+"?"+params,true);//true表示异步
        //4.发送请求
        xhr.send(null); //Get请求，send方法不传内容
        //5.对响应结果进行处理(在回调函数中处理)。
    }
    function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
        //1.定义请求url
        var url="doCheck";
        //2.定义请求参数
        var name=document.forms[0].name.value;
        var params="name="+name;
        //3.发送异步Get请求
        doAjaxGet(url,params,function(result){
            document.getElementById("result").innerHTML=result;
        })
    }
    function doSave(){
        //1.定义请求url
        var url="doSave";
        //2.定义请求参数
        var params="name="+document.forms[0].name.value;
        //3.发送异步的post请求
        doAjaxPost(url,params,function(result){
            document.getElementById("result").innerHTML=result;
        })
    }
    function doClear(){
        document.getElementById("result").innerHTML="";
    }
</script>
</html>